# 一、基本搭建
基本搭建流程参考上述文档即可，最麻烦的地方其实是在样式的调整和侧边栏、导航栏的自动化展开上，笔者是自己写了点简陋的代码实现简单的自动化
# 二、部署
可以参考hugo+github搭建博客的那边文档，目前笔者是部署在github page上
# 三、网站优化
# SiteMap网页地址生成插件
用于生成爬虫爬取的url
// 导入插件
npm install vuepress-plugin-sitemap
// 配置config.js
plugins:
[
['sitemap',
{
hostname: 'https://kubanzz.github.io',
dateFormatter: val => {
return new Date().toISOString()
}
}
]
]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Algolia 搜索插件添加
问题1：
error vuepress-plugin-sitemap apply generated failed.
RangeError: Invalid time value
at Date.toISOString (<anonymous>)
2
3
解决：
问题2：
无法爬取到内容
解决：进入下面爬虫配置地址，配置如下即可
# 添加图片缩放功能
开始引入的是官方的插件，但是发现根本没法用，后面在社区找到其他插件了，现在用的是vuepress-plugin-zooming (opens new window)，
// 导入插件 npm install -D vuepress-plugin-zooming // 配置 plugins: [ [ 'vuepress-plugin-zooming', { delay: 1000, options: { bgColor: 'black', zIndex: 10000, }, }, ], ],1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 添加评论功能
npm install vssue1
- 注册OAuth application：gittalk (opens new window)
- 引入vssue评论插件
在引入的过程遇到了坑，跟着官方文档无法正常显示，详细解决看下面问题5
# 四、问题解决
- 执行
npm run build后报下面错误
TypeError: Cannot read properties of undefined (reading 'match')
原因：nav有变量为空，导致失败
- 配置样式后没有用
在样式后面添加
!important添加后提高配置的优先级，从而让样式生效
可以采用PICGO提供的插件，在上面链接中获取API keys并配置到插件即可，每月免费500张
- 由于图床用的是github，国内网络无法访问，需要增加代理
解决思路是这样的，在下面自定义殒命中加入下面的格式的链接：
https://cdn.jsdelivr.net/gh/{github用户名}/{仓库名}@{分支}例如：
https://cdn.jsdelivr.net/gh/PI-KA-CHU/Image-OSS@main/imagesimage-20220827015830409.png在加入后发现了一个更加便捷的方式，其实不用每个图片路径都修改成jsdlivr，只要加了一个jsdelivr CDN加速的图片后，后续的其他github图片都可以正常加载，所以我将首页的图片改为jsdelivr加速的（只改一张即可），后续访问其他文档都可以正常进行
后来又发现，jsdlivr在移动网络下无法显示，所以又找了另一个CDN加速sevencdn (opens new window)，将
githubusercontent改成githubusercontents即可。
自定义域名：
https://raw.githubusercontents.com/PI-KA-CHU/Image-OSS/mainToken： Developer settings -> Personal access tokens -> 勾选repo -> 生成
- 引入vssue评论插件后，一直无法评价页面
后面发现插件不会自动引入评论组件，需要在Markdown中手动引入才能生效（有点鸡肋）
<Vssue/>1尝试了n种方法去讲vssue组件自动添加到所有Markdown中，但是都失败了，最后还是使用了gittalk，并且从一个博主中拿到了自动添加到markdown的js代码，vssue应该也可以做到，奈何我的前端太菜。（目前脚本存放在enchangeApp.js文件中）